<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box flex flex-center">
                <el-button
                    type="primary"
                    icon="el-icon-folder-add"
                    @click="submitForm('ruleForm')"
                >保存</el-button>
            </div>
            <div class="table-form-box">
                <h3 class="h3">人员档案</h3>
                <el-form :model="formData" :rules="rules" ref="ruleForm">
                    <table border="0" width="100%" cellpadding="0" cellspacing="1">
                        <colgroup>
                            <col width="8%" />
                            <col width="16%" />
                            <col width="8%" />
                            <col width="16%" />
                            <col width="8%" />
                            <col width="16%" />
                        </colgroup>
                        <thead></thead>
                        <tbody>
                            <tr class="tr-title">
                                <td colspan="6">基本信息</td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span title="lll">编号:</span>
                                </td>
                                <td>
                                    <el-form-item prop="id">
                                        <el-input
                                            placeholder="保存后自动生成"
                                            v-model="formData.id"
                                            size="small"
                                            disabled
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">工号:</td>
                                <td>
                                    <el-form-item prop="jobNumber">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.jobNumber"
                                            size="small"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td rowspan="9" align="right">照片:</td>
                                <td rowspan="9">
                                    <div class="crop-demo">
                                        <img :src="cropImg" class="pre-img" />
                                    </div>
                                    <div class="crop-demo-btn">
                                        选择图片
                                        <input
                                            class="crop-input"
                                            type="file"
                                            ncropImgame="image"
                                            accept="image/*"
                                            @change="setImage"
                                        />
                                    </div>
                                    <div class="crop-demo-btn" @click="cleanImage">清除</div>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span class="color-ff2200">*</span>姓名:
                                </td>
                                <td>
                                    <el-form-item prop="name">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.name"
                                            size="small"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>性别:
                                </td>
                                <td>
                                    <el-form-item prop="gender">
                                        <el-select v-model="formData.gender" placeholder="请选择">
                                            <el-option key="1" label="男" :value="true"></el-option>
                                            <el-option key="2" label="女" :value="false"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">出生日期:</td>
                                <td>
                                    <el-form-item prop="birthday">
                                        <el-date-picker
                                            style="width:99%"
                                            v-model="formData.birthday"
                                            align="right"
                                            type="datetime"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>身份证号码:
                                </td>
                                <td>
                                    <el-form-item prop="identityNo">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.identityNo"
                                            size="small"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span class="color-ff2200">*</span>政治面貌:
                                </td>
                                <td>
                                    <el-form-item prop="politicalStatusId">
                                        <el-select
                                            v-model="formData.politicalStatusId"
                                            placeholder="请选择"
                                            @change="handleValue($event,'政治面貌')"
                                            @focus="dictItemForPerfection('政治面貌')"
                                        >
                                            <el-option
                                                v-for="(item,index) in politicalStatusOptions"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>婚姻状况:
                                </td>
                                <td>
                                    <el-form-item prop="maritalStatus">
                                        <el-select
                                            v-model="formData.maritalStatus"
                                            placeholder="请选择"
                                        >
                                            <el-option key="1" label="已婚" :value="true"></el-option>
                                            <el-option key="2" label="未婚" :value="false"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">国籍:</td>
                                <td>
                                    <el-form-item prop="countryId">
                                        <el-select
                                            v-model="formData.countryId"
                                            placeholder="请选择"
                                            @change="handleValue($event,'国籍')"
                                            @focus="dictItemForPerfection('国籍')"
                                        >
                                            <el-option
                                                v-for="(item,index) in countryOptions"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>籍贯:
                                </td>
                                <td>
                                    <el-form-item prop="hometownId">
                                        <el-select
                                            v-model="formData.hometownId"
                                            placeholder="请选择"
                                            @change="handleValue($event,'籍贯')"
                                            @focus="dictItemForPerfection('籍贯')"
                                        >
                                            <el-option
                                                v-for="(item,index) in hometownOptions"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">户口:</td>
                                <td>
                                    <el-form-item prop="regResidence">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.regResidence"
                                            size="small"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>户口性质:
                                </td>
                                <td>
                                    <el-form-item prop="regResidenceNature">
                                        <el-select
                                            v-model="formData.regResidenceNature"
                                            placeholder="请选择"
                                        >
                                            <el-option key="1" label="城镇户口" :value="true"></el-option>
                                            <el-option key="2" label="农村户口" :value="false"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">家庭住址:</td>
                                <td>
                                    <el-form-item prop="familyAddress">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.familyAddress"
                                            size="small"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">电子邮箱:</td>
                                <td>
                                    <el-form-item prop="email">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.email"
                                            size="small"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>

                            <tr>
                                <td align="right">联系电话:</td>
                                <td>
                                    <el-form-item prop="phone">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.phone"
                                            size="small"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">毕业院校:</td>
                                <td>
                                    <el-form-item prop="graduateSchool">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.graduateSchool"
                                            size="small"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span class="color-ff2200">*</span>专业:
                                </td>
                                <td>
                                    <el-form-item prop="profession">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.profession"
                                            size="small"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">最高学位:</td>
                                <td>
                                    <el-form-item prop="mostDegree">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.mostDegree"
                                            size="small"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">毕业日期:</td>
                                <td>
                                    <el-form-item prop="graduationDate">
                                        <el-date-picker
                                            style="width:99%"
                                            v-model="formData.graduationDate"
                                            align="right"
                                            type="date"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </td>
                                <td align="right">紧急联系人:</td>
                                <td>
                                    <el-form-item prop="emergencyContact">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.emergencyContact"
                                            size="small"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">紧急联系人电话:</td>
                                <td>
                                    <el-form-item prop="emergencyNumber">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.emergencyNumber"
                                            size="small"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="mt20" border="0" width="100%" cellpadding="0" cellspacing="1">
                        <colgroup>
                            <col width="8%" />
                            <col width="16%" />
                            <col width="8%" />
                            <col width="16%" />
                            <col width="8%" />
                            <col width="16%" />
                        </colgroup>
                        <thead></thead>
                        <tbody>
                            <tr class="tr-title">
                                <td colspan="6">入职信息</td>
                            </tr>
                            <tr>
                                <td align="right">入职时间:</td>
                                <td>
                                    <el-form-item prop="onbordingTime">
                                        <el-date-picker
                                            style="width:99%"
                                            v-model="formData.onbordingTime"
                                            align="right"
                                            type="date"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </td>
                                <td align="right">转正日期:</td>
                                <td>
                                    <el-form-item prop="correctDate">
                                        <el-date-picker
                                            style="width:99%"
                                            v-model="formData.correctDate"
                                            align="right"
                                            type="date"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </td>
                                <td align="right">离职时间:</td>
                                <td>
                                    <el-form-item prop="resignationDate">
                                        <el-date-picker
                                            style="width:99%"
                                            v-model="formData.resignationDate"
                                            align="right"
                                            type="date"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span class="color-ff2200">*</span>所在部门:
                                </td>
                                <td>
                                    <el-form-item prop="departId">
                                        <el-select
                                            v-model="formData.departId"
                                            placeholder="请选择"
                                            @change="handleValue($event,'部门')"
                                            @focus="getDepart"
                                        >
                                            <el-option
                                                v-for="(item, index) in departList"
                                                :key="index"
                                                :label="item.name"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>岗位:
                                </td>
                                <td>
                                    <el-form-item prop="jobRole">
                                        <el-select
                                            v-model="formData.jobRoleId"
                                            placeholder="请选择"
                                            @change="handleValue($event,'岗位')"
                                            @focus="getJobrole"
                                        >
                                            <el-option
                                                v-for="(item, index) in jobroleList"
                                                :key="index"
                                                :label="item.name"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">直接上级:</td>
                                <td>
                                    <el-form-item prop="puperior">
                                        <div @click="showTreeDialog('经办人')">
                                            <!--puperiorUserId-->
                                            <el-input
                                                placeholder="请输入内容"
                                                v-model="formData.puperior"
                                                size="small"
                                                readonly
                                                suffix-icon="el-icon-search"
                                            ></el-input>
                                        </div>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">银行账号:</td>
                                <td>
                                    <el-form-item prop="bankCardNo">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.bankCardNo"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">公积金号:</td>
                                <td>
                                    <el-form-item prop="providentFund">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.providentFund"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">社保卡号:</td>
                                <td>
                                    <el-form-item prop="socialSecurityCard">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="formData.socialSecurityCard"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span class="color-ff2200">*</span>职称:
                                </td>
                                <td>
                                    <el-form-item prop="jobTitleId">
                                        <el-select
                                            v-model="formData.jobTitleId"
                                            placeholder="请选择"
                                            @change="handleValue($event,'职称')"
                                            @focus="dictItemForPerfection('职称')"
                                        >
                                            <el-option
                                                v-for="(item,index) in jobTitleOptions"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>职称等级:
                                </td>
                                <td>
                                    <el-form-item prop="itileLevelId">
                                        <el-select
                                            v-model="formData.itileLevelId"
                                            placeholder="请选择"
                                            @change="handleValue($event,'职称等级')"
                                            @focus="dictItemForPerfection('职称等级')"
                                        >
                                            <el-option
                                                v-for="(item,index) in itileLevelOptions"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>在职状态:
                                </td>
                                <td>
                                    <el-form-item prop="onbordingStatus">
                                        <el-select
                                            v-model="formData.onbordingStatus"
                                            placeholder="请选择"
                                        >
                                            <el-option key="1" label="在职" :value="0"></el-option>
                                            <el-option key="2" label="离职" :value="1"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </el-form>
                <add-row-table :data="resumeList" @fun="dealHistory" v-if="flag1"></add-row-table>
                <add-row-table :data="educationalExpList" @fun="dealEducation" v-if="flag2"></add-row-table>
                <upload-files :files="fileList" @fun="dealFiles" v-if="flag"></upload-files>
            </div>
        </div>

        <!-- 图片裁剪 -->
        <el-dialog title="裁剪图片" :visible.sync="dialogVisible" width="30%">
            <vue-cropper
                ref="cropper"
                :src="imgSrc"
                :ready="cropImage"
                :zoom="cropImage"
                :cropmove="cropImage"
                style="width:100%;height:300px;"
            ></vue-cropper>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelCrop">取 消</el-button>
                <el-button type="primary" @click="imageuploaded">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 查询 -->
        <tree-search
            :isShow="showSearch"
            :dialogTitle="searchDialogTit"
            @edit="searchBack"
            @close="closeTreeDialog"
        ></tree-search>
    </div>
</template>

<script>
import { fileUploadImage } from '../../../api/index';
import VueCropper from 'vue-cropperjs';
import appMain from '../../../utils/app_main';
import config from '../../../utils/config';
export default {
    name: 'employee',
    data() {
        return {
            rules: {
                //姓名
                name: [
                    {
                        required: true,
                        message: '请输入姓名',
                        trigger: 'change'
                    },
                    {
                        min: 2,
                        max: 18,
                        message: '长度在 2 到 18 个字符',
                        trigger: 'change'
                    },
                    {
                        required: true,
                        pattern: /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/,
                        message: '请输入格式正确的姓名',
                        trigger: 'change'
                    }
                ],
                jobNumber: [
                    {
                        min: 2,
                        max: 30,
                        message: '长度在 2 到 30 个字符',
                        trigger: 'change'
                    },
                    {
                        required: false,
                        pattern: /^[\u4E00-\u9FA5A-Za-z0-9\s]+(·[\u4E00-\u9FA5A-Za-z0-9]+)*$/,
                        message: '请输入格式正确的工号',
                        trigger: 'change'
                    }
                ],
                //性别
                gender: [{ required: true, message: '请选择', trigger: 'change' }],
                //身份证
                identityNo: [
                    {
                        required: true,
                        message: '请输入身份证号',
                        trigger: 'change'
                    },
                    {
                        min: 15,
                        max: 18,
                        message: '请如实填写18位号码',
                        trigger: 'change'
                    },
                    {
                        required: true,
                        pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                        message: '请输入正确的身份证号码',
                        trigger: 'change'
                    }
                ],
                //政治面貌
                politicalStatusId: [{ required: true, message: '请选择', trigger: 'change' }],
                //婚姻状况
                maritalStatus: [{ required: true, message: '请选择', trigger: 'change' }],
                //籍贯
                hometownId: [{ required: true, message: '请选择', trigger: 'change' }],
                //户口性质
                regResidenceNature: [{ required: true, message: '请选择', trigger: 'change' }],
                //专业
                profession: [
                    { required: true, message: '请输入专业名称', trigger: 'change' },
                    {
                        min: 2,
                        max: 30,
                        message: '长度在 2 到 30 个字符',
                        trigger: 'change'
                    },
                    {
                        required: true,
                        pattern: /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/,
                        message: '请输入格式正确的专业名称',
                        trigger: 'change'
                    }
                ],
                //所在部门
                departId: [{ required: true, message: '请选择', trigger: 'change' }],
                //岗位
                jobRole: [{ required: true, message: '请选择', trigger: 'change' }],
                //职称
                jobTitleId: [{ required: true, message: '请选择', trigger: 'change' }],
                //职称职等
                itileLevelId: [{ required: true, message: '请选择', trigger: 'change' }],
                //人员分类
                onbordingStatus: [{ required: true, message: '请选择', trigger: 'change' }],
                //电子邮箱
                email: [
                    {
                        required: false,
                        pattern: /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,
                        message: '请输入格式正确的邮箱',
                        trigger: 'change'
                    }
                ],
                //联系电话
                phone: [
                    {
                        required: false,
                        pattern: /^1[3456789]\d{9}$/,
                        message: '请输入正确的手机号码',
                        trigger: 'change'
                    }
                ],
                //毕业院校
                graduateSchool: [
                    {
                        min: 2,
                        max: 30,
                        message: '长度在 2 到 30 个字符',
                        trigger: 'change'
                    },
                    {
                        required: false,
                        pattern: /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/,
                        message: '请输入格式正确的院校名称',
                        trigger: 'change'
                    }
                ],
                //最高学位
                mostDegree: [
                    {
                        min: 2,
                        max: 30,
                        message: '长度在 2 到 30 个字符',
                        trigger: 'change'
                    },
                    {
                        required: false,
                        pattern: /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/,
                        message: '请输入格式正确的学位名称',
                        trigger: 'change'
                    }
                ],
                //紧急联系人
                emergencyContact: [
                    {
                        min: 0,
                        max: 30,
                        message: '长度在 2 到 30 个字符',
                        trigger: 'change'
                    },
                    {
                        required: false,
                        pattern: /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/,
                        message: '请输入格式正确的联系人',
                        trigger: 'change'
                    }
                ],
                //户口
                regResidence: [
                    {
                        min: 0,
                        max: 30,
                        message: '长度在 2 到 30 个字符',
                        trigger: 'change'
                    },
                    {
                        required: false,
                        pattern: /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/,
                        message: '请输入格式正确的户口',
                        trigger: 'change'
                    }
                ],
                //紧急联系人电话
                emergencyNumber: [
                    {
                        required: false,
                        pattern: /^1[3456789]\d{9}$/,
                        message: '请输入正确的手机号码',
                        trigger: 'change'
                    }
                ],
                //银行账号
                bankCardNo: [
                    {
                        required: false,
                        pattern: /^([1-9]{1})(\d{15}|\d{18})$/,
                        message: '请输入正确的银行账号',
                        trigger: 'change'
                    }
                ],
                //公积金号
                providentFund: [
                    {
                        required: false,
                        pattern: /^\d{6,}$/,
                        message: '请输入正确的公积金号',
                        trigger: 'change'
                    }
                ],
                //社保卡号
                socialSecurityCard: [
                    {
                        required: false,
                        pattern: /^\d{6,}$/,
                        message: '请输入正确的社保卡号',
                        trigger: 'change'
                    }
                ]
            },
            pageTitle: '',
            isEdit: false, // 是新增还是修改
            editId: '', // 修改的id
            flag: false,
            flag1: false,
            flag2: false,
            query: {
                address: '',
                name: '',
                pageIndex: 1,
                pageSize: 10
            },
            formData: {
                bankCardNo: '', // 银行卡号
                birthday: '', // 出身日期
                correctDate: '', // 转正日期
                countryId: '', // 国籍id
                countryName: '', // 国籍名
                countryValue: '', // 国籍值
                departName: '', // 部门名称
                departId: '', // 部门编号
                domain: '', // 域名 ??????????????????????
                email: '', // 电子邮箱
                emergencyContact: '', // 紧急联系人
                emergencyNumber: '', // 紧急联系电话
                familyAddress: '', // 家庭住址
                gender: '', // 性别  男 1或者女 0
                graduateSchool: '', // 毕业院校
                graduationDate: '', // 毕业日期
                hometownId: '', // 籍贯id 字典项
                hometownName: '', // 籍贯名
                hometownValue: '', // 籍贯值
                id: '', // 主键 ??????????????????
                idPhoto: '', // 证件照片地址？？？？？？？？？？？？
                identityNo: '', // 身份证号码
                itileLevelId: '', // 职称等级id
                itileLevelName: '', // 职称等级
                itileLevelValue: '', // 职称等级值
                jobNumber: '', // 工号
                jobRole: '', // 所属岗位
                jobRoleId: '', // 所属岗位ID
                jobTitleId: '', // 职称id
                jobTitleName: '', // 职称名称
                jobTitleValue: '', // 职称值
                maritalStatus: '', // 婚姻状况 1 已婚 0 未婚
                mostDegree: '', // // 最高学位
                name: '', // 姓名
                onbordingStatus: '', // 入职状态 ？？？？？？？？？？？？？
                onbordingTime: '', // 入职时间
                phone: '', // 联系电话
                politicalStatusId: '', //字典项主键   政治面貌id
                politicalStatusName: '', // 字典项目名称   政治面貌
                politicalStatusValue: '', // 字典项值   政治面貌值
                profession: '', // 专业   自己手动填写即可
                providentFund: '', // 公积金号
                puperior: '', // 直属上级
                puperiorUserId: '', // 直属上级ID
                regResidence: '', // 户口
                regResidenceNature: '', // 户口性质:城镇户口/农村户口
                resignationDate: '', // 离职日期
                socialSecurityCard: '', // 社保卡号
                educationalExpList: [], // 教育经历
                resumeList: [] // 工作经历
            },
            // 教育经历
            educationalExpList: {
                title: '教育经历',
                thead: [
                    {
                        value: '开始时间'
                    },
                    {
                        value: '结束时间'
                    },
                    {
                        value: '学校'
                    },
                    {
                        value: '专业'
                    },
                    {
                        value: '学历'
                    }
                ],
                dataList: [],
                emptyItem: [
                    {
                        type: 'date',
                        key: 'startTime',
                        value: '',
                        showInput: false
                    },
                    {
                        type: 'date',
                        key: 'endTime',
                        value: '',
                        showInput: false
                    },
                    {
                        type: 'text',
                        key: 'school',
                        value: '',
                        showInput: false
                    },
                    {
                        type: 'text',
                        key: 'profession',
                        value: '',
                        showInput: false
                    },
                    {
                        type: 'text',
                        key: 'education',
                        value: '',
                        showInput: false
                    }
                ]
            },
            // 工作经历
            resumeList: {
                title: '工作简历',
                thead: [
                    {
                        value: '开始时间'
                    },
                    {
                        value: '结束时间'
                    },
                    {
                        value: '工作单位'
                    },
                    {
                        value: '所在部门'
                    },
                    {
                        value: '工作内容'
                    },
                    {
                        value: '离职原因'
                    }
                ],
                dataList: [],
                emptyItem: [
                    {
                        type: 'date',
                        key: 'startTime',
                        value: '',
                        showInput: false
                    },
                    {
                        type: 'date',
                        key: 'endTime',
                        value: '',
                        showInput: false
                    },
                    {
                        type: 'text',
                        key: 'company',
                        value: '',
                        showInput: false
                    },
                    {
                        type: 'text',
                        key: 'department',
                        value: '',
                        showInput: false
                    },
                    {
                        type: 'text',
                        key: 'workContent',
                        value: '',
                        showInput: false
                    },
                    {
                        type: 'text',
                        key: 'resignationReason',
                        value: '',
                        showInput: false
                    }
                ]
            },

            // 上传头像
            defaultSrc: require('../../../assets/img/img.jpg'),
            imgSrc: '',
            cropImg: '',
            imgName: '',
            dialogVisible: false,

            // 上传文件,选择的文件
            fileList: [],
            files: [],
            countryOptions: [], // 国籍
            hometownOptions: [], // 籍贯
            jobTitleOptions: [], // 职称
            itileLevelOptions: [], // 职称等级
            politicalStatusOptions: [], // 政治面貌
            showSearch: false, // 显示搜索树弹窗
            searchDialogTit: '编辑',
            departList: [], //部门
            jobroleList: [] //岗位
        };
    },
    components: {
        VueCropper
    },
    methods: {
        // 如果是修改先获取数据。
        getData() {
            //清空档案
            this.resumeList.dataList = [];
            this.educationalExpList.dataList = [];
            this.flag = this.flag1 = this.flag2 = false;
            //获取人员档案数据
            appMain
                .findEmployeeById({}, this.userId)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.formData = res.data.data;
                        this.cropImg = this.formData.idPhoto;
                        this.getJobrole();
                        //获取人员档案附件
                        let val1 = this.uploadFileInfoFindById(this.userId);
                        //格式化
                        if (this.formData.resumeList == null || this.formData.resumeList == []) {
                            let val2 = this.formartResume(this.resumeList);
                        } else {
                            let val2 = this.formartResume(this.formData.resumeList);
                        }
                        if (this.formData.educationalExpList == null || this.formData.educationalExpList == []) {
                            let val3 = this.formartEdu(this.educationalExpList);
                        } else {
                            let val3 = this.formartEdu(this.formData.educationalExpList);
                        }
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //格式化 教育经历
        formartEdu(data) {
            for (const key in data) {
                let startTime = { type: 'date', key: 'startTime', value: data[key].startTime, showInput: false };
                let endTime = { type: 'date', key: 'endTime', value: data[key].endTime, showInput: false };
                let school = { type: 'text', key: 'school', value: data[key].school, showInput: false };
                let profession = { type: 'text', key: 'profession', value: data[key].profession, showInput: false };
                let education = { type: 'text', key: 'education', value: data[key].education, showInput: false };
                let item = [startTime, endTime, school, profession, education];
                this.educationalExpList.dataList.push(item);
                console.log('formartResume item', item);
            }
            this.flag2 = true;
        },

        //格式化 工作经历
        formartResume(data) {
            console.log('formartResume', data);
            for (const key in data) {
                let startTime = { type: 'date', key: 'startTime', value: data[key].startTime, showInput: false };
                let endTime = { type: 'date', key: 'endTime', value: data[key].endTime, showInput: false };
                let company = { type: 'text', key: 'company', value: data[key].company, showInput: false };
                let department = { type: 'text', key: 'department', value: data[key].department, showInput: false };
                let workContent = { type: 'text', key: 'workContent', value: data[key].workContent, showInput: false };
                let resignationReason = {
                    type: 'text',
                    key: 'resignationReason',
                    value: data[key].resignationReason,
                    showInput: false
                };

                let item = [startTime, endTime, company, department, workContent, resignationReason];
                this.resumeList.dataList.push(item);
            }
            this.flag1 = true;
        },
        //保存
        submit() {
            let params = this.formData;
            let mothedName = '';
            if (this.isEdit) {
                mothedName = 'updateEmployeeById';
            } else {
                mothedName = 'employeeInsert';
            }
            appMain[mothedName](params)
                .then(res => {
                    if (res.data.code === 20000) {
                        // if (this.isEdit) {
                        //     this.getData();
                        // }
                        this.$router.push({
                            //核心语句
                            path: '/employeeList' //跳转的路径
                        });
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.submit();
                    //this.resetForm('ruleForm');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                })
                .catch(() => {});
        },
        // 上传图片 start
        setImage(e) {
            const file = e.target.files[0];
            console.log('file', file);
            if (!file.type.includes('image/')) {
                return;
            }
            this.imgName = file.name;
            const reader = new FileReader();
            reader.onload = event => {
                this.dialogVisible = true;
                this.imgSrc = event.target.result;
                this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
            };

            reader.readAsDataURL(file);
        },
        cropImage() {
            this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
        },
        cancelCrop() {
            this.dialogVisible = false;
            this.cropImg = this.defaultSrc;
        },
        //图片上传
        imageuploaded() {
            const new_file = appMain.base64ToFile(this.cropImg, this.imgName);
            console.log('new_file', new_file);
            fileUploadImage(new_file, config.url.uploadFile).then(res => {
                if (res.code === 20000) {
                    this.formData.idPhoto = res.data;
                    this.cropImg = res.data;
                } else {
                    this.formData.idPhoto = '';
                    this.cropImg = '';
                    this.$message.error('服务器繁忙，请稍后再试');
                }
            });

            this.dialogVisible = false;
        },
        handleError() {
            this.$notify.error({
                title: '上传失败',
                message: '图片上传接口上传失败，可更改为自己的服务器接口'
            });
        },
        //清空图片
        cleanImage() {
            this.idPhoto = '';
            this.cropImg = this.defaultSrc;
            this.formData.idPhoto = '';
            console.log('cleanImage');
        },
        // 上传图片 end
        //展示树形搜索
        showTreeDialog(tit) {
            console.log('showTreeDialog');
            this.searchDialogTit = tit;
            this.showSearch = true;
        },
        // 处理工作经历数据
        dealHistory(data) {
            console.log('dealHistory', data);
            let resumeList = [];
            data.backData.map((item, index) => {
                let obj = {};
                let addFlag = true;
                for (let i = 0; i < item.length; i++) {
                    if (item[i].value === '') {
                        addFlag = false;
                        break;
                    }
                }
                obj.startTime = item[0].value;
                obj.endTime = item[1].value;
                obj.company = item[2].value;
                obj.department = item[3].value;
                obj.workContent = item[4].value;
                obj.resignationReason = item[5].value;
                if (addFlag) {
                    resumeList.push(obj);
                    this.formData.resumeList = resumeList;
                }
            });
            console.log(this.formData.resumeList, 'dealEducation');
        },
        // 处理学历数据
        dealEducation(data) {
            let educationalExpList = [];
            data.backData.map((item, index) => {
                let obj = {};
                let addFlag = true;
                for (let i = 0; i < item.length; i++) {
                    if (item[i].value === '') {
                        addFlag = false;
                        break;
                    }
                }
                obj.startTime = item[0].value;
                obj.endTime = item[1].value;
                obj.school = item[2].value;
                obj.profession = item[3].value;
                obj.education = item[4].value;
                if (addFlag) {
                    educationalExpList.push(obj);
                    this.formData.educationalExpList = educationalExpList;
                }
            });
            console.log(educationalExpList, 'dealEducation');
        },
        // 树组件搜索结果返回
        searchBack(data) {
            console.log(data.backData, 'searchTreeBack');
            this.formData.puperior = data.backData.name;
            this.showSearch = false;
        },
        closeTreeDialog(data) {
            this.showSearch = data.showDialog;
        },
        // 上传文件返回
        dealFiles(data) {
            this.fileList = data.backData;
            this.formData.uploadReturns = this.fileList;
            //console.log(this.formData);
        },
        /**
         * 下拉框数据start
         */
        dictItemForPerfection(item) {
            //国籍
            appMain.dictItem({ typeName: item }).then(res => {
                if (res.data.code === 20000) {
                    if (item == '国籍') {
                        this.countryOptions = res.data.data;
                    } else if (item == '籍贯') {
                        this.hometownOptions = res.data.data;
                    } else if (item == '职称') {
                        this.jobTitleOptions = res.data.data;
                    } else if (item == '职称等级') {
                        this.itileLevelOptions = res.data.data;
                    } else if (item == '政治面貌') {
                        this.politicalStatusOptions = res.data.data;
                    }
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },
        //下拉框选取值
        handleValue(e, dict) {
            console.log('handleValue', e);
            if (dict == '国籍') {
                let item = this.selectChooseItem(this.countryOptions, e);
                this.formData.countryId = item.id;
                this.formData.countryName = item.itemName;
                this.formData.countryValue = item.itemValue;
            } else if (dict == '籍贯') {
                let item = this.selectChooseItem(this.hometownOptions, e);
                this.formData.hometownId = item.id;
                this.formData.hometownName = item.itemName;
                this.formData.hometownValue = item.itemValue;
            } else if (dict == '职称') {
                let item = this.selectChooseItem(this.jobTitleOptions, e);
                this.formData.jobTitleId = item.id;
                this.formData.jobTitleName = item.itemName;
                this.formData.jobTitleValue = item.itemValue;
            } else if (dict == '职称等级') {
                let item = this.selectChooseItem(this.itileLevelOptions, e);
                this.formData.itileLevelId = item.id;
                this.formData.itileLevelName = item.itemName;
                this.formData.itileLevelValue = item.itemValue;
            } else if (dict == '政治面貌') {
                let item = this.selectChooseItem(this.politicalStatusOptions, e);
                this.formData.politicalStatusId = item.id;
                this.formData.politicalStatusName = item.itemName;
                this.formData.politicalStatusValue = item.itemValue;
            } else if (dict == '部门') {
                for (const key in this.departList) {
                    if (this.departList[key].id == e) {
                        this.formData.departId = e;
                        this.formData.departName = this.departList[key].name;
                    }
                }
            } else if (dict == '岗位') {
                for (const key in this.jobroleList) {
                    if (this.jobroleList[key].id == e) {
                        this.formData.jobRoleId = e;
                        this.formData.jobRole = this.jobroleList[key].name;
                    }
                }
            }
        },
        //通用字典选择
        selectChooseItem(item, id) {
            for (const key in item) {
                if (item[key].id == id) {
                    return item[key];
                }
            }
        },
        //根据id查询附件
        uploadFileInfoFindById(id) {
            appMain
                .uploadFileInfoFindById({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.fileList = res.data.data;
                        this.flag = true;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        /**
         * 下拉框获取end
         */
        //获取部门搜索元素
        getDepart() {
            appMain
                .organizationUserList()
                .then(res => {
                    if (res.data.code === 20000) {
                        this.departList = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 根据部门获取岗位
        getJobrole() {
            appMain
                .organizationUserListByOrgId({}, this.formData.departId)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.jobroleList = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        formartTableData() {
            //格式化
            let val2 = this.formartResume(this.resumeList);
            let val3 = this.formartEdu(this.educationalExpList);
        }
    },
    watch: {},
    created() {
        this.cropImg = this.defaultSrc;

        if (this.$route.query.id) {
            this.userId = this.$route.query.id;
            //是更新操作
            this.isEdit = true;
            this.getData();
        } else {
            //新增操作
            //this.$router.go(0);
            this.isEdit = false;
            this.flag = true;
            this.flag1 = true;
            this.flag2 = true;
            this.formartTableData();
        }
    },
    mounted() {
        //下拉框字典数据
        this.dictItemForPerfection('政治面貌');
        this.dictItemForPerfection('国籍');
        this.dictItemForPerfection('籍贯');
        this.dictItemForPerfection('职称');
        this.dictItemForPerfection('职称等级');
        this.getDepart();
        this.pageTitle = this.$router.currentRoute.meta.title;
        // 获取各种字典数据
        //this.dictItemForPerfection();
    }
};
</script>

<style scoped>
.container {
    padding-bottom: 50px;
}

.handle-box {
    /* padding: 5px 50px; */
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    z-index: 1;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 16px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.mt20 {
    margin-top: 20px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

.table-form-box table {
    background-color: #666;
}

.table-form-box .h3 {
    font-size: 22px;
    text-align: center;
    font-weight: normal;
    padding: 20px 0;
}

.table-form-box table .tr-title td {
    font-size: 16px;
    line-height: 40px;
}

.table-form-box table td,
.table-form-box table th {
    background-color: #fff;
    padding: 4px;
    min-height: 40px;
    font-size: 12px;
}

.color-ff2200 {
    color: #ff2200;
}

.pre-img {
    width: 100%;

    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
}

.crop-demo {
    display: flex;
    align-items: flex-end;
}

.crop-demo-btn {
    position: relative;
    width: 80px;
    height: 30px;
    line-height: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
    margin-top: 10px;
    float: left;
    margin-right: 10px;
}

.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
</style>
